<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>xx管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form ref="form" :model="form" label-width="100px">

                        <el-form-item label="标题">
                            <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                        </el-form-item>
                        <el-form-item label="图片">
                            <upload :isMult="false" @selectImg="showImg" :imgModel="'image'" :initData="form.image">
                            </upload>
                        </el-form-item>

                        <el-form-item label="多张图片 json">
                            <upload :isMult="true" @selectImg="showImg" :imgModel="'images'" :initData="arrData.images">
                            </upload>
                        </el-form-item>
                        <el-form-item label="单图">
                            <upload :isMult="false" @selectImg="showImg" :imgModel="'img'" :initData="form.img">
                            </upload>
                        </el-form-item>

                        <el-form-item label="多图 json">
                            <upload :isMult="true" @selectImg="showImg" :imgModel="'imgs'" :initData="arrData.imgs">
                            </upload>
                        </el-form-item>
                        <el-form-item label="单图">
                            <upload :isMult="false" @selectImg="showImg" :imgModel="'pic'" :initData="form.pic">
                            </upload>
                        </el-form-item>

                        <el-form-item label="多图 json">
                            <upload :isMult="true" @selectImg="showImg" :imgModel="'pics'" :initData="arrData.pics">
                            </upload>
                        </el-form-item>
                        <el-form-item label="内容 富文本">
                            <editor @getContent="getContent" :initContent="form.content"></editor>
                        </el-form-item>
                        <el-form-item label="状态:0=关闭,1=开启">
                            <el-radio v-model="form.state" label="0">关闭</el-radio>
                            <el-radio v-model="form.state" label="1">开启</el-radio>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button :loading="loading" type="primary" @click="saveData">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script type="text/javascript">
    import upload from '@/components/utils/upload';
    import editor from '@/components/utils/editor';
    export default {
        components: {

            upload,
            editor
        },
        data() {
            return {
                loading: false,
                id: '',
                form: {
                    id: '',
                    title: '',
                    image: '',
                    images: '',
                    img: '',
                    imgs: '',
                    pic: '',
                    pics: '',
                    content: '',
                    state: '',

                },
                arrData: {
                    images: [],
                    imgs: [],
                    pics: [],
                }
            }
        },
        created() {
            this.id = this.$route.query.id;
            this.getData();

        },
        methods: {
            getData() {
                if (this.id <= 0) return;
                this.loading = true;
                let param = {
                    id: this.id
                };
                this.$post_('test/info', param, (res) => {
                    this.loading = false;
                    if (res.code == 0 && res.data) {
                        this.form.id = res.data.id;
                        this.form.title = res.data.title;
                        this.form.image = res.data.image;
                        this.form.images = res.data.images;
                        this.form.img = res.data.img;
                        this.form.imgs = res.data.imgs;
                        this.form.pic = res.data.pic;
                        this.form.pics = res.data.pics;
                        this.form.content = res.data.content;
                        this.form.state = res.data.state;
                        this.arrData.images = JSON.parse(res.data.images);
                        this.arrData.imgs = JSON.parse(res.data.imgs);
                        this.arrData.pics = JSON.parse(res.data.pics);
                    }
                }, (res) => {
                    this.loading = false;
                })
            },


            showImg(imgData, isMult, imgKey) {
                if (isMult) {
                    this.arrData[imgKey] = [];
                    imgData.forEach((val) => {
                        this.arrData[imgKey].push(val);
                    })
                } else {
                    this.form[imgKey] = imgData;
                }
            },
            //获取编辑器内容
            getContent(content) {
                this.form.content = content;
            },


            //保存数据
            saveData() {
                this.loading = true;
                this.form.id = this.id;
                this.form.images = JSON.stringify(this.arrData.images);
                this.form.imgs = JSON.stringify(this.arrData.imgs);
                this.form.pics = JSON.stringify(this.arrData.pics);

                this.$post_('test/edit', this.form, (res) => {
                    console.log(res);
                    this.loading = false;
                    if (res.code == 0) {
                        this.$message.success(res.msg);
                        this.$router.back(-1);
                    } else {
                        this.$message.error(res.msg);
                    }
                }, (res) => {
                    this.loading = false;
                    this.$message.error('出错了！')
                })
            }
        }
    }
</script>

<style scoped="scoped">

</style>
